<template>
    <div class="app-container">
      <div class="filter-container">
        <el-select
          v-model="listQuery.query_type"
          style="width: 150px"
          class="filter-item"
          @change="onChangeType"
          placeholder="查询类型"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>

        <el-select
          v-if="userType == 'all' && listQuery.query_type == 2"
          v-model="listQuery.user_type"
          style="width: 150px"
          class="filter-item"
          @change="onChangeUser"
          placeholder="用户类型"
        >
          <el-option
            v-for="item in userTypeOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>

        <el-select
          v-if="listQuery.query_type != 3"
          v-model="listQuery.username"
          clearable
          filterable
          style="width: 150px"
          class="filter-item"
          @change="handleFilter"
          placeholder="用户搜索"
        >
          <el-option
            v-for="(item, index) in userArr"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
        
        <el-date-picker
          v-if="listQuery.query_type != 1"
          v-model="value1"
          type="daterange"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="filter-item pickertime"
          format="yyyy-MM-dd"
          value-format="timestamp"
          :picker-options="pickerOptions2"
          @change="handleFilter"
        />
        <a-button type="primary" size="large" @click="handleFilter">
          搜索
        </a-button>
        <a-button type="default" size="large" @click="handleCancel">
          重置
        </a-button>
      </div>
  
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        fit
        show-summary
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          key="1"
          label="日期"
          align="center"
          prop="time_"
          sortable="custom"
          min-width="50"
        >
        </el-table-column>
        <el-table-column
          v-if="listQuery.query_type != 3"
          key="2"
          prop="username"
          label="账号"
          min-width="50"
          align="center"
        >
        <template slot-scope="{ row }">
            <span> {{ row.username }} </span>
            <span v-if="listQuery.user_type == 2"> <el-link type="primary" @click="xiaji(row)">查看下级</el-link></span>
          </template>
      </el-table-column>
        <el-table-column v-if="listQuery.query_type == 1" label="设置的回传率" min-width="50" align="center" key="3">
          <template slot-scope="{ row }">
            <span>{{(row.probability / 100).toFixed(2)}} %</span>
          </template>
        </el-table-column>
        <el-table-column
          key="4"
          prop="back_sum"
          sortable
          label="监测链接(落地页)数量"
          min-width="50"
          align="center"
        ></el-table-column>
        <el-table-column sortable label="应该回传数" prop="all_back" min-width="50" key="5" align="center"></el-table-column>
        <el-table-column
          key="6"
          prop="back"
          sortable
          label="回传数量"
          min-width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          key="7"
          prop="no_back"
          sortable
          label="未回传数量"
          min-width="50"
          align="center"
        ></el-table-column>
        
        <el-table-column label="真实回传率" min-width="50" align="center" key="8">
          <template slot-scope="{ row }">
            <span>{{( row.back / (row.back + row.no_back) * 100).toFixed(2)}} %</span>
          </template>
        </el-table-column>

        <el-table-column v-if="listQuery.query_type != 3" label="包" min-width="50" align="center" key="9">
          <template slot-scope="{row}">
            <span>
              {{ optionPackageName[row.pkg] }} 
            </span>
          </template>
        </el-table-column>
        <el-table-column  v-if="listQuery.query_type != 3" label="查看落地页" min-width="50" align="center" key="18">
          <template slot-scope="{ row }">
            <el-link @click="showldtData(row)">查看落地页</el-link>
            <el-link v-if="listQuery.query_type == 1" @click="pullSetting(row)">修改回传率</el-link>
          </template>
        </el-table-column>

        <!-- <el-table-column v-if="listQuery.query_type != 3" label="落地页链接" min-width="120" align="center" key="10">
          <template slot-scope="{row}">
            <div v-if="langind_list[row.landing_page_id]">{{ langind_list[row.landing_page_id].url +"?channel=" + row.username + "&qd=" +  row.username}}</div>
          </template>
        </el-table-column> -->

      <!-- <el-table-column v-if="listQuery.query_type != 3" label="落地页图片" min-width="100" align="center" key="11">
        <template slot-scope="{row}">
          <el-image 
            v-if="langind_list[row.landing_page_id]"
            style="width: 50px; height: 100px"
            :src="langind_list[row.landing_page_id].img_url" 
            :preview-src-list="[langind_list[row.landing_page_id].img_url]">
          </el-image>
        </template>
      </el-table-column> -->
      </el-table>
      <div v-if="listQuery.query_type != 1">
        <pagination
          v-show="total > 0"
          :total="total"
          class="pageShow"
          :page.sync="listQuery.page"
          :page_size.sync="listQuery.page_size"
          @pagination="getList"
        />
      </div>
      
      <el-dialog
       
        :title=" xiajiQuery.proxy_name + ' - 下级渠道'"
        :visible.sync="xiajiVisible"
        width="80%"
        :before-close="channelClose">
        <div v-loading="xiajiloading">
          <div style="padding-bottom: 10px">
            <el-input
              v-model.trim="xiajiQuery.username"
              placeholder="请输入下级账号进行搜索"
              style="width: 220px"
              class="filter-item"
              @keyup.enter.native="getChannel"
            />
            <el-button
              plain
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="getChannel"
              >搜索</el-button
            >
          </div>
          <el-table
          :data="channelList"
          style="width: 100%">
          <el-table-column
            prop="time_"
            label="日期"
            width="100">
          </el-table-column>
          <el-table-column
            prop="username"
            label="渠道名称"
            width="100">
          </el-table-column>
          
            <el-table-column
              key="4"
              prop="back_sum"
              sortable
              label="监测链接(落地页)数量"
              min-width="50"
              align="center"
            ></el-table-column>
            <el-table-column sortable label="应该回传数" prop="all_back" min-width="50" key="5" align="center"></el-table-column>
            <el-table-column
              key="6"
              prop="back"
              sortable
              label="回传数量"
              min-width="50"
              align="center"
            ></el-table-column>
            <el-table-column
              key="7"
              prop="no_back"
              sortable
              label="未回传数量"
              min-width="50"
              align="center"
            ></el-table-column>
        
            <el-table-column label="真实回传率" min-width="50" align="center" key="8">
              <template slot-scope="{ row }">
                <span>{{( row.back / (row.back + row.no_back) * 100).toFixed(2)}} %</span>
              </template>
            </el-table-column>

            <el-table-column label="包" min-width="50" align="center" key="9">
              <template slot-scope="{row}">
                <span>
                  {{ optionPackageName[row.pkg] }}
                </span>
              </template>
            </el-table-column>

            <el-table-column label="查看落地页" min-width="50" align="center" key="18">
              <template slot-scope="{ row }">
                <el-link @click="showldtData(row)">查看落地页</el-link>
              </template>
            </el-table-column>
        </el-table>

        </div>
        <div>
          <pagination
            :total="channelTotal"
            class="pageShow"
            :page.sync="xiajiQuery.page"
            :page_size.sync="xiajiQuery.page_size"
            @pagination="getChannel"
          />
        </div>
      </el-dialog>

      <el-dialog
      title="落地页"
      :visible.sync="ldyVisible"
      width="80%">
      <div>
        <el-table
        :data="ldtData"
        style="width: 100%">
        <el-table-column label="落地页链接" min-width="200" align="center">
          <template slot-scope="{row}">
            <div v-html="get_luodiye(langind_list, row) "></div>
          </template>
        </el-table-column>
        <el-table-column label="落地页图片" min-width="100" align="center">
          <template slot-scope="{row}">
            <el-image 
              v-if="langind_list[row.id]"
              style="width: 50px; height: 100px"
              :src="langind_list[row.id].img_url" 
              :preview-src-list="[langind_list[row.id].img_url]">
            </el-image>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ldyVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="channel_name + '拉起配制'" :visible.sync="pull_setting_dialog" label-position="top"  width="600px">
        <div v-loading="channel_loading">
            <el-form :model="form">

          <!-- <el-form-item label="拉起间隔(小时):" >
            <el-input type="number" v-model.number="form.a6" autocomplete="off" style="width: 100px"></el-input>
          </el-form-item> -->

          <el-form-item label="回传率(万分比):" >
                <el-input type="number" v-model.number="form.a9" autocomplete="off" style="width: 100px"></el-input>
          </el-form-item>

          <!-- <el-form-item label="回传触发事件:">
      
              <el-select
                  v-model="form.a8"
                  style="width: 150px"
                  class="filter-item"
                  filterable
                >
                  <el-option label="未选择" value="" />
                  <el-option label="uv" value="uv" />
                  <el-option label="点击" value="ex" />
              </el-select>
              <span> * 未选择默认uv是回传事件</span>
          </el-form-item> -->

        </el-form>
        </div>
        
        <div slot="footer" style="text-align:left" class="dialog-footer">
          <el-button @click="pull_setting_dialog = false">取 消</el-button>
          <el-button type="primary" @click="subChannelConfig()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
    getProxyNameList,
    getChannelNameList,
    getTXstatistics,
    getLangingPage,
    getStatisticsChannelList,
    getChannelConfig,
    setChannelConfig
  } from "@/api/admin/admin";
  import {getPkgList} from "@/api/adv_admin/config.js"
  import waves from "@/directive/waves"; // waves directive
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {qd_List, pkgs, get_luodiye} from '@/utils/index'
  export default {
    name: "Report",
    components: { Pagination },
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        get_luodiye,
        ldyVisible :false,
        ldtData : [],
        optionPackageName: {},
        dialogVisible: false,
        userType: this.$store.state.user.type,
        username: this.$store.state.user.name.username,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        value1: "",
        userArr: [],
        dailiArr: [],
        channelArr: [],
        listQuery: {
          type: 'oppo',
          page: 1,
          page_size: 20,
          query_type: 1,
          user_type: '',
          username: "",
          time_start: "",
          time_end: "",
        },
        pickerOptions2: {
          shortcuts: [
            {
              text: "昨天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        typeOptions: [
          { label: "实时数据", key: 1 },
          { label: "历史记录", key: 2 },
          { label: "总统计", key: 3 },
        ],
        userTypeOptions: [
          { label: "渠道历史", key: 3 },
          { label: "代理历史", key: 2 },
        ],
        qd_List: qd_List,
        langind_list : {},
        tg_option: {},
        xiajiVisible: false,
        xiajiQuery: {
          page: 1,
          page_size: 20,
          username: "",
          proxy_name: "",
          time_: "",
          type_: "oppo",
        },
        channelList: [],
        channelTotal: 0,
        xiajiloading: false,
        form: {
          'a1': false,  // # cnzz统计oppo
          'a2': true,  // # cnzz统计vivo
          'a3': false,  // # cnzz统计小米
          'a4': true,  // # cnzz统计华为
          'a5': false,  // # cnzz全量统计
          'a6': 1,  // # 渠道拉起间隔
          'a7': true,  // # 口令
        },
        channel_name: '',
        pull_setting_dialog: false,
        channel_loading: false
      };
    },
    created() {
      this.getPkgs()
      this.getLangingPages()
      this.getList();
      this.getChannelNameList();
      this.getProxyNameList()
    },
    mounted() {
        this.listQuery.query_type = 1;
    },
    methods: {
      pullSetting(v) {
        this.pull_setting_dialog = true
        this.channel_loading = true
        getChannelConfig({'channel': v.username}).then(res => {
          if (res.STATUS == 200) {
            this.form = JSON.parse(res.DATA.config)
            this.channel_name = v.username
            this.is_fz = res.DATA.is_fuzhou
          } else{
            this.$message.error(res.DEC)
            this.pull_setting_dialog = false
          }
          this.channel_loading = false
        })
      },
      subChannelConfig(){
        setChannelConfig({channel: this.channel_name, config: JSON.stringify(this.form)}).then(res => {
          if (res.STATUS == 200){
            this.$message.success('修改成功')
            this.pull_setting_dialog = false
            this.getList();
          }else{
            this.$message.error(res.DEC)
          }
          
        })
      },
      getPkgs(){
        getPkgList().then(res => {
          if (res.STATUS == 200){
                  this.optionPackageName = res.DATA.list
              }
        })
      },
      showldtData(row){
        console.log('row:',row)
        this.ldyVisible = true
        this.ldtData = []
        for(let k in row.landing_page_id){
          this.ldtData.push({
            'id': row.landing_page_id[k],
            'username': row.username,
            'tg': row.tg,
            'channel_config': row.channel_config,
            'pkg': row.pkg,
            'show': row.show
          })
        }
        // console.log(this.ldtData)  
      },
      getLangingPages(){
        getLangingPage({'tg': '1'}).then(res => {
          if (res.STATUS == 200){
            this.langind_list = res.DATA.landing_page;
            this.tg_option = res.DATA.tg
          }
        })
      },
      getList() {
        this.listLoading = true;
        if (this.value1) {
          this.listQuery.time_start = this.value1[0] / 1000;
          this.listQuery.time_end = this.value1[1] / 1000;
        } else {
          this.listQuery.time_start = "";
          this.listQuery.time_end = "";
        }
        getTXstatistics(this.listQuery).then(res => {
          this.listLoading = false;
          if (res.STATUS == 200){
            this.list = res.DATA.list
            this.total = res.DATA.total
            for(let i = 0; i < this.list.length; i++){
              this.list[i]['all_back'] = this.list[i].back + this.list[i].no_back
            }
          }
          // console.log(this.list)
        })
            
      },
      //切换查看类型
      onChangeType() {
        this.listQuery.username = '';
        this.listQuery.time_start =  ""
        this.listQuery.time_end = ""
        this.listQuery.user_type = 3
        this.userArr = this.channelArr
        this.handleFilter();
      },
      //切换用户类型
      onChangeUser() {
        // console.log('11111111111', this.listQuery.query_type)
        this.listQuery.username = "";
        if (this.listQuery.user_type == 2) {
          this.userArr = this.dailiArr
        } else {
          this.userArr = this.channelArr
        }
        this.handleFilter();
      },
      //获取代理列表
      getProxyNameList() {
        getProxyNameList().then((r) => {
          this.dailiArr = r.DATA;
        });
      },
      //获取渠道列表
      getChannelNameList() {
        getChannelNameList().then((r) => {
          this.channelArr = r.DATA;
          this.userArr = r.DATA
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleCancel() {
        this.value1 = "";
        this.listQuery.page = 1;
        this.listQuery.query_type = 1;
        this.listQuery.username = '';
        this.listQuery.time_start =  ""
        this.listQuery.time_end = ""
        this.userArr = this.channelArr
        this.getList();
      },
      xiaji(row){
        this.xiajiVisible = true
        this.xiajiQuery.page = 1;
        this.xiajiQuery.username = '';
        this.xiajiQuery.proxy_name = row.username
        this.xiajiQuery.time_ =row.time_1
        this.getChannel()
        
      },
      getChannel(){
        this.xiajiloading = true
        getStatisticsChannelList(this.xiajiQuery).then(res => {
          this.xiajiloading = false
          if (res.STATUS == 200){
            this.channelList = res.DATA.list
            this.channelTotal = res.DATA.total
            for(let i = 0; i < this.channelList.length; i++){
              this.channelList[i]['all_back'] = this.channelList[i].back + this.channelList[i].no_back
            }
          }else{


          }
        })
      },
      channelClose(){
        this.xiajiVisible = false
        this.xiajiQuery.page = 1;
        this.xiajiQuery.username = '';
        this.xiajiQuery.proxy_name = '';
        this.xiajiQuery.time_ =  ""
      }
    }
  };
  </script>
  
  <style scoped>
  .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 24%;
    }
  .pageHidden {
    display: none;
  }
  @media (max-width: 550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .pickertime {
      width: 100%;
    }
  }
  .filter-item {
    margin-bottom: 3px;
  }
  </style>
  